<template>
	<view class="content" :style="'background: url('+ c_imgPath + 'chouka/ka_bg.png'+ ') repeat 0 0 / 100% 100%;'">

		<view class="head">
			<view class="status_bar" :style="'height:'+ statusBarHeight +'px;'"></view>
			<view class="header_title">
				<view @click="back()">
					<image :src="z_imgPath + 'back.png'"></image>返回
				</view>
				<view class="hang1">抽卡机 </view>
			</view>
		</view>

		<view class="ka_title"
			:style="'background: url('+ c_imgPath + 'chouka/title_bg.png'+ ') repeat 0 0 / 100% 100%;'">
			<view>
				<view class="hang1 ka_title_text">{{goods.title}} </view>
				<view class="ka_title_price"> ￥<text>{{goods.show_price}}</text>/包</view>
			</view>
		</view>

		<view class="gonggao"
			:style="'background: url('+ c_imgPath + 'chouka/gonggaoBg.png'+ ') repeat 0 0 / 100% 100%;'"
			v-if="goods.card_notice">
			<uni-notice-bar :single="true" :speed="50" color="#ffffff" :scrollable="true" :text="goods.card_notice"
				backgroundColor="rgba(0,0,0,0)"></uni-notice-bar>

		</view>
		<view class="gonggao" v-else></view>

		<view class="box">
			<view class="box_dan">
				<image class="box_dan_shang" v-if="pay_sueecss != 2" :class="pay_sueecss == 1?'xiayi':''"
					:src="c_imgPath + 'chouka/dan_shang.png'">
				</image>
				<image class="box_dan_kai" v-if="pay_sueecss != 2" :class="pay_sueecss == 1?'kai':''"
					:src="c_imgPath + 'chouka/dan_kai.png'">
				</image>
				<image class="box_dan_zhong" v-if="pay_sueecss != 2" :class="pay_sueecss == 1?'xiaoshi':''"
					:src="c_imgPath + 'chouka/dan_zhong.png'">
				</image>
				<image class="box_dan_xia" v-if="pay_sueecss != 2" :class="pay_sueecss == 1?'shangyi':''"
					:src="c_imgPath + 'chouka/dan_xia.png'">
				</image>
				<image class="box_dan_tai" :src="c_imgPath + 'chouka/dan_tai.png'"></image>
				<image v-if="pay_sueecss == 2" class="box_zheng" :class="pay_sueecss == 1 ?'xianshi':''"
					:src="c_imgPath + 'chouka/dan_zheng.png'">
				</image>
			</view>
			<view v-if="pay_sueecss == 0" class="box_center animated pulse infinite"
				:style="'background: url('+ goods.imgurl_detail+ ') repeat 0 0 / 100% 100%;'">
			</view>
		</view>

		<view class="footer" v-if="is_shiwan">
			<view class="footer_left"
				:style="'background: url('+c_imgPath + 'chouka/btn_l.png'+ ') repeat 0 0 / 100% 100%;'"
				@click="choujiang('left_count')">
				<view :style="'background: url('+ c_imgPath + 'chouka/pop1.png'+ ') repeat 0 0 / 100% 100%;'"
					class="footer_right_text" v-if="card_set.left_notice">
					<text>{{card_set.left_notice}}</text>
				</view>
			</view>
			<view :style="'background: url('+ c_imgPath + 'chouka/btn_r.png'+ ') repeat 0 0 / 100% 100%;'"
				class="footer_right" @click="choujiang('right_count')">
				<view :style="'background: url('+ c_imgPath + 'chouka/pop1.png'+ ') repeat 0 0 / 100% 100%;'"
					class="footer_right_text" v-if="card_set.right_notice">
					<text>{{card_set.right_notice}}</text>
				</view>
			</view>
			<view :style="'background: url('+ c_imgPath + 'chouka/btn_c.png'+ ') repeat 0 0 / 100% 100%;'"
				class="footer_center" @click="choujiang('center_count')">
				<view :style="'background: url('+ c_imgPath + 'chouka/pop.png'+ ') repeat 0 0 / 100% 100%;'"
					class="footer_center_text" v-if="card_set.center_notice">
					<text>{{card_set.center_notice}}</text>
				</view>
			</view>
		</view>
		<view class="footer" v-else>
			<view class="footer_left"
				:style="'background: url('+c_imgPath + 'mine/btn_l_sel.png'+ ') repeat 0 0 / 100% 100%;'">
			</view>
			<view :style="'background: url('+ c_imgPath + 'mine/btn_r_sel.png'+ ') repeat 0 0 / 100% 100%;'"
				class="footer_right">
			</view>
			<view :style="'background: url('+ c_imgPath + 'mine/btn_c_sel.png'+ ') repeat 0 0 / 100% 100%;'"
				class="footer_center" @click="shiwan()">
				<view :style="'background: url('+ c_imgPath + 'chouka/pop.png'+ ') repeat 0 0 / 100% 100%;'"
					class="footer_center_text" v-if="card_set.center_notice">
					<text>试手气获得卡片不进入卡册</text>
				</view>
			</view>
		</view>

		<view class="xuanfu" v-if="is_shiwan">
			<image :src="c_imgPath + 'chouka/jilv.png'" @click="getjilv()"></image>
			<image :src="c_imgPath + 'chouka/tujian.png?1'" @click="getTujian()"></image>
			<image :src="c_imgPath + 'chouka/guize.png'" @click="$refs.shuoming.open()"></image>
			<image :src="c_imgPath + 'chouka/kace.png'"
				@click="gotoPage('/pages/chouka/detail?goods_id=' + goods.id+'&show=1')">
			</image>
			<button open-type="contact" class="contact">
				<image :src="c_imgPath + 'chouka/kefu.png'"></image>
			</button>
			<image :src="c_imgPath + 'chouka/shiwan_btn.png'" @click="shiwan()"></image>
		</view>
		<view class="xuanfu" v-else>
			<image :src="c_imgPath + 'chouka/guize.png'" @click="$refs.shuoming.open()"></image>
			<button open-type="contact" class="contact">
				<image :src="c_imgPath + 'chouka/kefu.png'"></image>
			</button>
		</view>

		<uni-popup ref="shuoming" type="center">
			<view class="pop"
				:style="'background: url('+ c_imgPath + 'chouka/gz_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
				<view class="pop_title">规则说明</view>
				<view class="pop_con">
					<scroll-view scroll-y="true" style="height: 440rpx;">
						<view v-html="news"></view>
					</scroll-view>
				</view>
			</view>
			<view class="shuoming_close" @click="$refs.shuoming.close()">
				<image :src="c_imgPath + 'detail/close.png'"></image>
			</view>
		</uni-popup>

		<!-- 确认订单 -->
		<uni-popup ref="order_show" type="bottom" :isMaskClick="false">
			<view class="order animated fadeInUp">
				<view class="order_title"
					:style="'background: url('+ c_imgPath + 'chouka/order_p.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<!-- <image :src="z_imgPath + 'order_p.png'"></image> -->
					<view class="order_title_text">确认订单</view>
					<view class="ca" @click="$refs.order_show.close()">×</view>
				</view>
				<view class="order_title_con1">
					<view class="order_pic" v-if="pay_news.goods">
						<view class="order_pic_img">
							<image :src="pay_news.goods.imgurl_detail"></image>
						</view>
						<view>
							<view style="font-size: 35rpx;">{{pay_news.goods.title}}</view>
							<view style="margin-top: 40rpx;">类型：{{pay_news.goods.first_num}}包</view>
							<view style="margin-top: 10rpx;">
								<text>单价：<text style="color: ;">{{goods.price}}元</text></text>
								<text>×{{pay_news.goods.prize_num}}</text>
							</view>
						</view>
					</view>
					<view class="order_num">
						<view style="font-size: 28rpx;" v-if="pay_news.goods">数量：{{pay_news.goods.prize_num}}张</view>
						<view>
							小计:{{goods.box_type==5?'':'￥'}}<text>{{pay_news.order_total}}{{goods.box_type==5?'积分':''}}</text>
						</view>
					</view>
				</view>
				<view class="order_title_con1">
					<view class="order_coupon" @click="selectCoupon">
						<view class="coupon_text">优惠券</view>
						<view class="coupon_money">{{!coupon_info_s ? '暂无可用优惠券':'-￥'+coupon_info_s.money}}</view>
					</view>
				</view>
				<view class="order_title_con1" v-if="pay_news.is_show == 1 &&  goods.box_type!=1">
					<view style="font-size: 28rpx;margin-bottom: 10rpx;">支付方式</view>
					<view class="fangshi" @click="change_yuan_index(1)" v-if="goods.type != 3">
						<view class="flex_center">
							<image :src="c_imgPath+'chouka/bi.png'"></image>
							<view>
								使用赏币抵扣￥<text>{{pay_news.use_integral}}</text>（剩余：<text>{{pay_news.integral}}</text>）
							</view>
						</view>
						<image :src="c_imgPath + 'chouka/yuan'+ (bi?'_sel':'') +'.png'"></image>
					</view>
					<view class="fangshi" @click="change_yuan_index(2)" v-if="pay_news.money > 0">
						<view class="flex_center">
							<image :src="c_imgPath + 'chouka/yue.png'"></image>
							<view>
								使用余额抵扣￥<text>{{pay_news.use_money}}</text>（剩余：<text>{{pay_news.money}}</text>）
							</view>
						</view>
						<image :src="c_imgPath + 'chouka/yuan'+ (yue?'_sel':'') +'.png'"></image>
					</view>
				</view>
				<view style="font-size: 24rpx;" class="order_desc" @click="is_xy = !is_xy">
					<image :src="c_imgPath + 'detail/yuan'+ (is_xy?'_sel':'') +'.png'"></image>
					<text style="color: #B07CDD;" @click="gotoPage('/pages/guize/guize?type=2')">《用户服务协议条款》</text>
				</view>
				<view class="order_title_btn">
					<view>
						总计:{{goods.box_type==5?'':'￥'}}<text
							style="font-size: 40rpx;">{{pay_news.price}}{{goods.box_type==5?'积分':''}}</text>
					</view>
					<view class="zhifu" @click="pay()"
						:style="'background: url('+ c_imgPath + 'chouka/order_btn.png'+ ') no-repeat 0 0 / 100% 100%;'">
						<text>确定支付</text>
					</view>
				</view>
				<view class="order_bottom"></view>
			</view>
		</uni-popup>
		<!-- 抽卡记录 -->
		<uni-popup ref="jilv" type="bottom" :isMaskClick="false">
			<view class="order animated fadeInUp">
				<view class="order_title"
					:style="'background: url('+ c_imgPath + 'chouka/order_p.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<!-- <image :src="z_imgPath + 'ckjl_p.png'"></image> -->
					<view class="order_title_text">抽卡记录</view>
					<view class="ca" @click="$refs.jilv.close(),page_num=1,mixTotal=0">×</view>
				</view>
				<view class="jilv_title">
					<view v-for="(item,index) in shang_cate" :key="index" @click="change_shang_id(item.id)" :style="shang_id==item.id?
						'background: url('+ c_imgPath + 'chouka/title_bg_sel.png'+ ') no-repeat 0 0 / 100% auto;'
						:
						'background: url('+ c_imgPath + 'chouka/title_bg_s.png'+ ') no-repeat 0 0 / 100% auto ;'">
						<text>{{item.title}}</text>
					</view>
				</view>
				<!--   -->
				<scroll-view scroll-y="true" @scrolltolower="getjilv" style="height: 900rpx;">
					<view v-for="(item,index) in jl_Arr" :key="index" class="jilv_list">
						<view>
							<view class="flex_center ">
								<image :src="item.user_info.headimg"></image>
								<view class="hang1" style="max-width: 260rpx;">{{item.user_info.nickname}}</view>
							</view>
							<view style="font-size: 24rpx;">{{item.addtime}}</view>
						</view>
						<view>
							<view class="flex_center">
								<image :src="item.goodslist_imgurl" style="border-radius: 8rpx;"></image>
								<view class="hang1" style="max-width: 300rpx;">{{item.goodslist_title}}</view>
							</view>
							<view>X{{item.prize_num}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="order_bottom"></view>
			</view>
		</uni-popup>

		<!-- 图鉴 -->
		<uni-popup ref="tujian" type="bottom" :isMaskClick="false">
			<view class="order animated fadeInUp">
				<view class="order_title"
					:style="'background: url('+ c_imgPath + 'chouka/order_p.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<!-- <image :src="z_imgPath + 'tujian_p.png'"></image> -->
					<view class="order_title_text">图鉴详情</view>
					<view class="ca" @click="$refs.tujian.close(),page_num_t=1,mixTotal_t=0">×</view>
				</view>
				<view class="jilv_title">
					<view v-for="(item,index) in tujian_cate" :key="index" @click="change_tujian(item.id)"
						:style="tujian_id==item.id?'background:#B07CDD':''">
						<text>{{item.title}}</text>
						<!-- v-if="index!==0"  -->
						<view style="font-size: 20rpx;">({{item.rate}}%)</view>
					</view>
				</view>
				<scroll-view scroll-y="true" @scrolltolower="getTujian" style="height: 900rpx;">
					<view class="tuijian_list">
						<view class="tuijian_item" v-for="(item,index) in tujian_Arr" :key="index">
							<image :src="item.imgurl"></image>
							<view>{{item.title}}</view>
							<!-- <view style="font-size: 20rpx;">{{item.shang_title}}</view> -->
							<view style="font-size: 20rpx;">参考价:{{item.price}}元</view>
							<!-- <view style="font-size: 20rpx;">{{item.real_pro}}%</view> -->
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 奖品弹窗 -->
		<uni-popup ref="jp_show" type="center" :isMaskClick="false" mask-background-color="rgba(0,0,0,.95)">
			<view class="pop_jp ">
				<view class="pop_jp_title">
					<image :src="c_imgPath + 'chouka/title_img.png'"></image>
				</view>
				<view class="jp_title_1"
					:style="'background: url('+ c_imgPath + 'chouka/list_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<view class="jp_list_box">
						<view class="jp_list" v-for="(v,i) in jp_arr" :key='i' @click="yulan(v,i)"
							:animation="animationMain">
							<!-- @click="kaiqi_jp(v.kaiqi,i)" -->
							<!-- z_imgPath+ 'bei.png 'chouka/jp_bg.png' mode="aspectFit"-->
							<view class="jp_img"
								:style="'background: url('+ c_imgPath+ v.color +') no-repeat 0 0 / 100% 100%;'">
								<image :src=" v.goodslist_imgurl"></image>
							</view>
							<view class="jp_shang_title hang1"> {{v.goodslist_title}}</view>
							<view class="jp_prize_num">{{v.shang_name}} x1</view>
						</view>
					</view>
				</view>
				<view class="jp_btn">
					<!-- <image :src="z_imgPath + 'yjdk.png'" @click="dakai()"></image>
					<image :src="z_imgPath + 'srkc.png'" @click="inkace()"></image> -->
					<view class="jp_btn_box left" @click="toShangDai()" v-if="show_shiwan"
						:style="'background: url('+ c_imgPath + 'chouka/jp_btn_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						<text>去卡册</text>
					</view>
					<view class="jp_btn_box left" @click="$refs.jp_show.close(),choujiang(prize_num_type)"
						v-if="show_shiwan"
						:style="'background: url('+ c_imgPath + 'chouka/jp_btn_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						<text>再来一次</text>
					</view>
					<view class="jp_btn_box" @click="$refs.jp_show.close()"
						:style="'background: url('+ c_imgPath + 'chouka/jp_btn_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 详情弹窗 -->
		<uni-popup ref="yulanPop" type="center" mask-background-color="rgba(0,0,0,.95)">
			<swiper :indicator-dots="false" :autoplay="false" :duration="500" :current="current_index"
				style="width: 540rpx;height: 1000rpx;">
				<swiper-item v-for="(v,i) in yulanList" :key="i">
					<view class="yulanStyle"
						:style="'background: url('+ c_imgPath + 'detail/ylBg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						<view class="yulanStyle_title">
							<text>{{v.shang_name}}</text>
						</view>
						<view>
							<image style="width: 466rpx;height: 654rpx;" :src="v.goodslist_imgurl" mode="widthFix">
							</image>
						</view>
					</view>
					<view class="hang1 bomText"
						style="margin-top: 50rpx;font-size: 28rpx;height: 68rpx;line-height: 68rpx; "
						:style="'background: url('+ c_imgPath + 'detail/textBg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						{{v.goodslist_title}}
					</view>
					<view class="hang1 bomText"
						style="margin-top: 30rpx;font-size: 28rpx;height: 68rpx;line-height: 68rpx; "
						:style="'background: url('+ c_imgPath + 'detail/textBg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						参考价格:￥{{v.goodslist_money}}
					</view>
					<view class="shuoming_close" @click="$refs.yulanPop.close()">
						<image :src="c_imgPath + 'detail/close.png'"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-popup>
		<!-- 优惠券弹窗 -->
		<uni-popup ref="coupon" type="center" mask-background-color="rgba(0,0,0,.8)">
			<view class="coupon">
				<view class="coupon_img">
					<image :src="c_imgPath + 'mine/coupon_img.png'"></image>
				</view>
				<view class="coupon_btn" @click="receive_coupon">
					<image :src="c_imgPath + 'mine/coupon_btn.png'"></image>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="coupon_info" type="center" mask-background-color="rgba(0,0,0,.8)">
			<view class="coupon">
				<view class="coupon_title">
					<image :src="c_imgPath + 'detail/jp_img.png'"></image>
				</view>
				<view class="coupon_box"
					:style="'background: url('+ c_imgPath + 'detail/jp_bg5.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<view class="coupon_box_item"
						:style="'background: url('+ c_imgPath + 'mine/coupon_bg.png'+ ') repeat-y 0 0 / 100% 100%;'">
						<view class="item_box">
							<view class="item_left">
								<view class="left_num">￥<text>{{coupon_info.money}}</text></view>
								<view class="left_text">满{{coupon_info.out_money}}减</view>
							</view>
							<view class="xian"></view>
							<view class="item_center">
								<view class="center_title hang2">{{coupon_info.goods_title}}</view>
								<view class="center_time"><text>{{coupon_info.title}}</text>
									有效期至{{coupon_info.end_time}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="coupon_btn" @click="$refs.coupon_info.close()">
					<image :src="c_imgPath + 'mine/coupon_btn2.png'"></image>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="coupon_list" type="bottom" mask-background-color="rgba(0,0,0,.8)">
			<view class="coupon bomList">
				<view class="coupon_list_title"
					:style="'background: url('+ c_imgPath + 'detail/jilv_p.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<!-- <image :src="z_imgPath + 'detail/jilv_p.png'"></image> -->
					<view class="jilvOrderTitle_text">优惠券</view>
					<view class="ca" @click="$refs.coupon_list.close()">×</view>
				</view>
				<view class="coupon_list" style="max-height:900rpx;">
					<scroll-view scroll-y="true" style="max-height:900rpx;">
						<view class="item" @click="selectCouponItem(item)"
							:style="'background: url('+ c_imgPath + 'mine/coupon_bg.png'+ ') repeat-y 0 0 / 100% 100%;'"
							v-for="(item,index) in coupon_list" :key="index">
							<view class="item_box">
								<view class="item_left">
									<view class="left_num">￥<text>{{item.money}}</text></view>
									<view class="left_text">满{{item.out_money}}减</view>
								</view>
								<view class="xian"></view>
								<view class="item_center">
									<view class="center_title hang2">{{item.goods_title}}</view>
									<!-- {{item.title}} -->
									<view class="center_time"><text>{{item.title}}</text> 有效期至{{item.end_time}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<!-- 开奖动画 -->
		<openA ref="turnOver" @towrap="toShangDai" @animateEnd="inkace">
		</openA>
		<!-- <view v-show="openAs" class="openAs">
			<view class="openA">
				<view class="pop_jp_title">
					<image :src="c_imgPath + 'chouka/title_img.png'"></image>
				</view>
				<z-swiper v-model="jp_arr" ref="zSwiper" :options="options">
					<z-swiper-item :custom-style="slideCustomStyle" v-for="(item,index) in jp_arr" :key="index">
						<view class="openA_img">
							<image :src="item.goodslist_imgurl"></image>
						</view>
						<view class="openA_title hang1"
							:style="'background: url('+ c_imgPath + 'chouka/jp_btn_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
							{{item.goodslist_title}}
						</view>
					</z-swiper-item>
				</z-swiper>
				<view class="jp_btn">
					<view class="jp_btn_box left" @click="toShangDai()" v-if="show_shiwan"
						:style="'background: url('+ c_imgPath + 'chouka/jp_btn_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						<text>去卡册</text>
					</view>
					<view class="jp_btn_box" @click="inkace()"
						:style="'background: url('+ c_imgPath + 'chouka/jp_btn_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						确定
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import openA from '@/components/drawTurnOver.vue'
	export default {
		components: {
			openA
		},
		data() {
			return {
				z_imgPath: this.$z_img + 'chouka/',
				c_imgPath: 'https://qt.yhemall.com/',
				u_imgPath: '/static/',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				goods_id: '',
				goods: {},
				card_set: {},
				news: '',
				current_index: 0,
				// 
				prize_num_type: '',
				bi: true,
				yue: true,
				pay_news: {},
				// 支付失效
				pay_status: false,
				//动画控制
				pay_sueecss: 0,
				// 抽卡记录
				shang_cate: [],
				shang_id: 0,
				// 中赏记录
				jl_Arr: [],
				page_num: 1, // 页码
				mixTotal: 0, // 统计信息总页数
				// 图鉴详情
				tujian_cate: [],
				tujian_id: 0,
				tujian_Arr: [],
				page_num_t: 1, // 页码
				mixTotal_t: 0, // 统计信息总页数
				// 翻牌
				jp_news: {},
				jp_arr: [],
				jp_arr1: [],
				animationMain: null, //正
				animationBack: null,
				kaiqi_index: '',
				// 是否全收 1:全收
				buy_type: 0,
				// 是否开完明信片
				is_open_end: false,
				yulanList: [], //预览数组

				coupon_info: '', //领取优惠券详情
				coupon_list: [], //可用优惠券列表
				coupon_info_s: '', //已选择优惠券详情
				is_xy: true,
				is_shiwan: true,
				show_shiwan: true,
				options: {
					effect: 'cards'
				},
				slideCustomStyle: {},
				itemCustomStyle: {
					'width': '500rpx',
					'height': '700rpx'
				},

				openAs: false
			}
		},
		onReady() {},
		onLoad(v) {
			if (v.pid) {
				uni.setStorageSync('pid', v.pid)
			}
			if (v.shiwan) {
				this.is_shiwan = false;
			}
			this.goods_id = v.goods_id
			this.getData()
			this.getDanye(6)
			this.getClass();
		},
		onShareAppMessage() {
			let that = this;
			return {
				title: "乐掏" + that.goods.title + '系列',
				imageUrl: that.goods.card_banner,
				path: "/pages/chouka/ka?goods_id=" + that.goods_id + '&pid=' + uni.getStorageSync('userinfo').ID +
					'&from=' + uni.getStorageSync('userinfo').from
			};
		},
		watch: {
			jp_arr() {
				for (let i = 0; i < this.jp_arr.length; i++) {
					if (this.jp_arr[i].kaiqi) {
						if (this.jp_arr.length - 1 == i) {
							this.is_open_end = true
							return
						}
					} else {
						this.is_open_end = false
						return
					}
				}
			}
		},
		methods: {
			//试玩
			shiwan() {
				let that = this;
				that.show_shiwan = false;
				that.req({
					url: 'card_demo',
					data: {
						id: that.goods_id,
					},
					success(res) {
						if (res.status == 1) {
							that.jp_arr = res.data;
							that.donghua();
						}
					}
				})
			},
			//优惠券
			selectCouponItem(item) {
				this.coupon_info_s = item;
				this.$refs.coupon_list.close();
				this.order_money();
			},
			selectCoupon() {
				if (this.coupon_list.length >= 1) {
					this.$refs.coupon_list.open();
				}
			},
			receive_coupon() {
				let that = this;
				that.req({
					url: 'receive_coupon',
					data: {
						goods_id: that.goods_id,
					},
					success(res) {
						if (res.status == 1) {
							uni.showToast({
								title: '领取成功',
								icon: 'success'
							})
							that.coupon_info = res.data;
							that.$refs.coupon.close();
							that.$refs.coupon_info.open();
						} else {
							that.$refs.coupon.close();
						}
					}
				})
			},

			yulan(e, a) {
				this.yulanList = [];
				this.current_index = 0
				this.yulanList.push(e);
				this.$refs.yulanPop.open();
			},
			toShangDai() {
				this.$refs.jp_show.close()
				uni.navigateTo({
					url: '/pages/chouka/kace'
				})
			},
			inkace() {
				let that = this;
				that.$refs.jp_show.open()
				return false;
				console.log(this.is_open_end)
				if (!this.is_open_end) {
					uni.showModal({
						title: '提示',
						content: '系统将默认自动开启您的奖袋，并存入卡册',
						cancelText: '取消',
						confirmText: '确定',
						confirmColor: '#B07CDD',
						cancelColor: '#999999 ',
						success(res) {
							if (res.confirm) {
								for (let i = 0; i < that.jp_arr.length; i++) {
									that.$set(that.jp_arr[i], 'kaiqi', true)
								}
								setTimeout(() => {
									that.$refs.jp_show.close()
								}, 2000)
							} else if (res.cancel) {

							}
						}
					})
				} else {
					this.$refs.jp_show.close()
				}

			},
			dakai() {
				for (let i = 0; i < this.jp_arr.length; i++) {
					this.$set(this.jp_arr[i], 'kaiqi', true)
				}
			},
			kaiqi_jp(a, b) {
				let that = this
				that.kaiqi_index = b
				that.animation_main = uni.createAnimation({
					duration: 800,
					timingFunction: 'linear'
				})
				that.animation_back = uni.createAnimation({
					duration: 0,
					timingFunction: 'linear'
				})
				if (!a) {
					// 点击正面
					this.animation_main.rotateY(180).step()
					this.animationMain = this.animation_main.export()
					setTimeout(() => {
						that.$set(that.jp_arr[b], 'kaiqi', true)
						that.animation_back.rotateY(0).step()
						this.animationBack = this.animation_back.export()
					}, 750)
				}
			},
			// 图鉴详情
			change_tujian(e) {
				this.tujian_id = e
				this.page_num_t = 1
				this.tujian_Arr = []
				this.getTujian()
			},
			getTujian() {
				uni.navigateTo({
					url: '/pages/chouka/tujian?id=' + this.goods_id
				})
				// let that = this;
				// if (this.page_num_t !== 1 && this.page_num_t > this.mixTotal_t) {
				// 	return
				// }
				// that.req({
				// 	url: 'shang_goods',
				// 	Loading: true,
				// 	data: {
				// 		page: that.page_num_t,
				// 		card_id: that.goods_id,
				// 		shang_id: that.tujian_id
				// 	},
				// 	success(res) {
				// 		if (res.status == 1) {
				// 			that.tujian_cate = res.data.card_level;
				// 			// that.tujian_id = that.tujian_cate[0].id;
				// 			that.mixTotal_t = res.data.goods.last_page
				// 			if (that.page_num_t === 1) {
				// 				that.tujian_Arr = res.data.goods.data;
				// 			} else {
				// 				that.tujian_Arr = that.tujian_Arr.concat(res.data.goods.data)
				// 			}
				// 			that.page_num_t += 1
				// 			that.$refs.tujian.open()
				// 			console.log(that.tujian_Arr)
				// 		}
				// 	}
				// })
			},
			// 抽卡记录
			change_shang_id(e) {
				this.shang_id = e
				console.log(e);
				this.page_num = 1
				this.jl_Arr = []
				this.getjilv()
			},
			getjilv() {
				let that = this;
				if (this.page_num !== 1 && this.page_num > this.mixTotal) {
					return
				}
				that.req({
					url: 'card_reward_log',
					Loading: true,
					data: {
						page: that.page_num,
						card_id: that.goods_id,
						category_id: that.shang_id
					},
					success(res) {
						if (res.status == 1) {
							// that.shang_cate = res.data.category;
							// that.jl_Arr = res.data.data;
							// that.$refs.jilv.open()
							that.mixTotal = res.data.last_page
							if (that.page_num === 1) {
								that.jl_Arr = res.data.data;
							} else {
								that.jl_Arr = that.jl_Arr.concat(res.data.data)
							}
							that.page_num += 1
							that.$refs.jilv.open()
						}
					}
				})
			},
			getClass() {
				var that = this;
				that.req({
					url: 'card_level',
					data: {
						goods_id: that.goods_id,
					},
					Loading: true,
					success(res) {
						if (res.status == 1) {
							that.shang_cate = res.data;
							that.shang_id = res.data[0].id;
						}
					}
				})
			},
			change_yuan_index(e) {
				if (e == 1) {
					this.bi = !this.bi
				}
				if (e == 2) {
					this.yue = !this.yue
				}
				this.order_money()
			},
			choujiang(e) {
				let that = this;
				that.req({
					url: 'coupon',
					data: {
						goods_id: that.goods_id,
						type: 1,
						num: '',
						status: e
					},
					success(res) {
						if (res.status == 1) {
							that.coupon_list = [];
							that.coupon_info_s = '';
							if (res.data.list.length > 0) {
								that.coupon_list = res.data.list;
								that.coupon_info_s = res.data.list[0];
							}
							that.prize_num_type = e
							that.order_money()
						}
					}
				})
			},
			order_money(type) {
				let that = this;
				that.req({
					url: 'buy_money',
					Loading: true,
					data: {
						type: that.prize_num_type,
						card_id: that.goods_id,
						use_money_is: that.yue ? 1 : 2,
						use_integral_is: that.bi ? 1 : 2,
						coupon_id: that.coupon_info_s.coupon_id ? that.coupon_info_s.coupon_id : ''
					},
					success(res) {
						if (res.status == 1) {
							that.$refs.order_show.open()
							that.pay_news = res.data
						}
					}
				})
			},

			pay() {
				let that = this;
				if (!that.is_xy) {
					uni.showToast({
						title: '请阅读并同意协议',
						icon: 'none',
						duration: 1000
					})
					return
				}
				that.jp_arr = []
				let info = {
					type: that.prize_num_type,
					card_id: that.goods_id,
					use_money_is: that.yue ? 1 : 2,
					use_integral_is: that.bi ? 1 : 2,
					coupon_id: that.coupon_info_s.coupon_id ? that.coupon_info_s.coupon_id : ''
				}

				if (that.pay_status) {
					return
				}
				that.req({
					url: 'card_goods_buy',
					data: info,
					success(res) {
						if (res.status == 1) {
							// #ifdef MP
							// that.$refs.zSwiper.swiper.slideTo(0, 10, false)
							// #endif
							if (res.data.status == 1) {
								that.info = {}
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.res.timeStamp,
									nonceStr: res.data.res.nonceStr,
									package: res.data.res.package,
									signType: 'MD5',
									paySign: res.data.res.paySign,
									complete(ress) {
										if (ress.errMsg == 'requestPayment:fail cancel') {
											uni.showToast({
												title: '取消支付',
												icon: 'none',
												duration: 1000
											})
										}
										if (ress.errMsg == 'requestPayment:ok') {
											uni.showToast({
												title: '支付成功',
												icon: 'success',
												duration: 1000
											})
											setTimeout(() => {
												that.$refs.order_show.close()
												that.req({
													url: 'prize_log',
													data: {
														order_num: res.data.order_num
													},
													success(aa) {
														if (aa.status == 1) {
															that.jp_arr = aa.data;
															that.donghua();
														}
													}
												})
											}, 1500)

										}
									}
								})
							} else {
								that.info = {}
								that.$refs.order_show.close()
								that.req({
									url: 'prize_log',
									data: {
										order_num: res.data.order_num
									},
									success(aa) {
										if (aa.status == 1) {
											that.jp_arr = aa.data
											that.jp_arr1 = JSON.parse(JSON.stringify(aa.data))
											that.$refs.turnOver.open(that.jp_arr1, false)
											// that.donghua();
										}

									}
								})
							}
						}
					}
				})
			},
			donghua() {
				var _this = this;
				_this.pay_sueecss = 1;
				setTimeout(() => {
					_this.donghua1()
					_this.pay_sueecss = 2;
				}, 1500)
			},
			donghua1() {
				var _this = this;
				setTimeout(() => {
					_this.$refs.turnOver.open(_this.jp_arr, false)
					_this.pay_sueecss = 0;
					return
					_this.$refs.jp_show.open()
				}, 2000)
			},
			tokefu() {
				// #ifdef  MP-WEIXIN  
				wx.openCustomerServiceChat({
					extInfo: {
						url: uni.getStorageSync('wx_link') //客服地址链接
					},
					corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
					success(res) {
						console.log(res, 1)
					},
					fail(res) {
						console.log(res, 2)
					},
				})
				// #endif
			},
			getDanye(e) {
				let that = this;
				that.req({
					url: 'card_rule',
					data: {
						type: e
					},
					success(res) {
						if (res.status == 1) {
							that.news = res.data
						}
					}
				})
			},
			back() {
				var pages = getCurrentPages();

				if (pages.length == 1 && pages[0].route == "pages/chouka/ka") {
					uni.switchTab({
						url: '/pages/shouye/index'
					})
				} else {
					uni.navigateBack()
				}

			},
			getData() {
				let that = this;
				that.req({
					url: 'card_goods_detail',
					Loading: true,
					data: {
						goods_id: that.goods_id,
						// user_id:uni.getStorageSync('userinfo').ID?uni.getStorageSync('userinfo').ID:''
					},
					success(res) {
						if (res.status == 1) {
							if (res.data.is_coupon == 2 && that.is_shiwan) {
								that.$refs.coupon.open();
							}
							that.goods = res.data;
							that.card_set = res.data.card_set
						}

					}
				})
			},



		}
	}
</script>

<style lang="scss">
	.openAs {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		flex-direction: column;
		justify-content: center;
		z-index: 99;
	}

	.openA {
		width: 690rpx;
		height: 800rpx;
		margin: auto;
		text-align: center;

		.openA_img {
			image {
				width: 500rpx;
				height: 700rpx;
			}
		}

		.openA_title {
			width: 300rpx;
			height: 68rpx;
			line-height: 68rpx;
			margin: auto;
			text-align: center;
			color: #FFFFFF;
		}
	}


	.coupon {
		.coupon_list_title {
			display: flex;
			align-items: center;
			height: 89rpx;

			.jilvOrderTitle_text {
				flex: 1;
				text-align: center;
				margin-top: 20rpx;
				font-size: 40rpx;
				background: linear-gradient(0deg, #B18DD6 0%, #FFFFFF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.ca {
				position: absolute;
				right: 20rpx;
			}
		}

		.coupon_img {
			image {
				width: 426rpx;
				height: 308rpx;
			}
		}

		.coupon_btn {
			text-align: center;

			image {
				width: 336rpx;
				height: 92rpx;
			}
		}

		.coupon_title {
			text-align: center;

			image {
				width: 430rpx;
				height: 124rpx;
				margin: 0 auto;
			}
		}

		.coupon_box,
		.coupon_list {
			width: 690rpx;
			height: 230rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin: auto;
			margin-bottom: 30rpx;

			.coupon_box_item,
			.item {
				padding: 20rpx;
				box-sizing: border-box;
				// border: 1px solid #5D5868;
				// background: linear-gradient(0deg, #2D2C4A 0%, #48495B 100%);
				border-radius: 10rpx;
				margin-bottom: 40rpx;

				.item_box {
					display: flex;
					align-items: center;
					color: #FFFFFF;
					text-shadow: 0px 0px 11px rgba(49, 117, 255, 0.7);
				}

				.item_left {
					text-align: center;
					padding: 0 30rpx;
					flex: 0.3;

					// border-right: 1px dashed #CCCCCC;
					.left_num {
						font-size: 30rpx;

						text {
							font-size: 54rpx;
						}
					}

					.left_text {
						font-size: 20rpx;
					}
				}

				.xian {
					height: 80rpx;
					width: 1px;
					border-right: 1px solid #CCCCCC;
				}

				.item_center {
					flex: 1;
					margin-left: 20rpx;

					.center_title {
						font-size: 28rpx;
					}

					.center_time {
						font-size: 20rpx;
						margin-top: 20rpx;

						text {
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}

	.bomList {
		height: 950rpx;
		background-color: #09081C;

		.coupon_list {
			padding: 0;

			.item {
				margin-top: 20rpx;
			}
		}
	}






	/* 换箱 */
	.yulanStyle image:nth-of-type(1) {
		width: 550rpx;
		/* height: 550rpx; */
		margin: 26rpx 25rpx;
	}

	.yulanStyle>view:nth-of-type(2) {
		// border: 10rpx solid #B07CDD;
		box-sizing: border-box;
		overflow: hidden;
	}

	.yulanStyle_title {
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 24rpx;
		margin: 36rpx 0 0 30rpx;
	}

	.yulanStyle>view:nth-of-type(1) {
		padding: 8rpx 26rpx;
		width: fit-content;
		position: absolute;
		font-size: 28rpx;

		text {
			font-family: Source Han Sans CN;
			font-weight: bold;
			background: linear-gradient(0deg, #B75AFF 0%, #E7CBFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.bomText {
		width: 360rpx;
		height: 68rpx;
		margin: auto;
		color: #FFFFFF;
		text-align: center;
	}

	.yulanStyle {
		width: 516rpx;
		font-size: 47rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;

		.shuoming_close {
			text-align: center;
			margin-top: 20rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}


	.box {
		margin-top: -100rpx;
		height: 1100rpx;
		text-align: center;
	}

	.box_dan {
		text-align: center;
		position: relative;
		width: 100%;
		margin-top: -100rpx;
		z-index: 8;
		height: 1100rpx;

		.box_dan_shang {
			width: 480rpx;
			height: 298rpx;
			position: absolute;
			left: 135rpx;
			z-index: 6;
		}

		.box_dan_kai {
			width: 210rpx;
			height: 210rpx;
			position: absolute;
			z-index: 8;
			top: 130rpx;
			left: 270rpx;
		}

		.box_dan_zhong {
			width: 456rpx;
			height: 666rpx;
			position: absolute;
			left: 147rpx;
			top: 170rpx;
			z-index: 8;
		}

		.box_dan_xia {
			width: 480rpx;
			height: 286rpx;
			position: absolute;
			left: 135rpx;
			bottom: 90rpx;
			z-index: 5;
		}

		.box_dan_tai {
			position: absolute;
			z-index: 4;
			left: 0;
			right: 0;
			bottom: 0;
			width: 750rpx;
			height: 373rpx;
		}

		.xiayi {
			animation: xiayi 2s;
		}

		@keyframes xiayi {
			0% {
				transform: translateY(0rpx);
				opacity: 1;
			}

			100% {
				transform: translateY(238rpx);
				opacity: 0.6;
			}
		}

		.kai {
			animation: kai 2s;
		}

		@keyframes kai {
			0% {
				transform: translateY(0rpx);
				opacity: 1;
			}

			100% {
				transform: translateY(278rpx);
				opacity: 0.6;
			}
		}

		.shangyi {
			animation: shangyi 2s;
		}

		@keyframes shangyi {
			0% {
				transform: translateY(0rpx);
				opacity: 1;
			}

			100% {
				transform: translateY(-278rpx);
				opacity: 0.6;
			}
		}

		.xiaoshi {
			animation: xiaoshi 2s;
		}

		@keyframes xiaoshi {
			0% {
				opacity: 1;
			}

			50% {
				opacity: 0;
			}

			100% {
				opacity: 0;
			}
		}
	}

	.box_center {
		width: 279rpx;
		height: 407rpx;
		position: absolute;
		left: 235rpx;
		top: 600rpx;
		z-index: 4;
	}

	.xianshi {
		animation: xianshi 2s linear infinite;
	}

	@keyframes xianshi {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.box_zheng {
		width: 507rpx;
		height: 507rpx;
		margin-top: 250rpx;
		animation: load 1s linear infinite;
	}

	@keyframes load {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(1440deg);
		}
	}




	.jp_btn {
		margin-top: 50rpx;
		display: flex;
		align-items: center;

		.jp_btn_box {
			width: 230rpx;
			height: 68rpx;
			margin: auto;
			line-height: 68rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
		}

		.left {
			text {
				background: linear-gradient(180deg, #B55AFF 0%, #E5C7FF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	.jp_prize_num {
		position: absolute;
		padding: 5rpx 10rpx;
		border-radius: 0px 20rpx 0px 0px;
		background-color: rgba(0, 0, 0, 0.6);
		text-align: center;
		font-size: 24rpx;
		bottom: 48rpx;
		left: 42rpx;
		color: #FFFFFF;
	}

	.jp_shang_title {
		box-sizing: border-box;
		background: linear-gradient(0deg, #A85AFF 0%, #E2E4FF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		padding: 2rpx 20rpx;
		text-align: center;
		font-weight: bold;
		margin-top: -30rpx;
	}

	.jp_img {
		/* position: absolute;
		top: 14rpx;
		left: 14rpx;
		box-sizing: border-box; */
		width: 195rpx;
		height: 270rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 130rpx;
			height: 190rpx;
		}
	}


	.jp_list {
		font-size: 24rpx;
		width: 210rpx;
		// height: 318rpx;
		margin: 20rpx 0;
		/* padding: 0 30rpx; */
		box-sizing: border-box;
		position: relative;
	}

	.jp_title_1>view:nth-child(3n+2) {
		/* margin: 20rpx 26rpx 0; */
	}

	.jp_list_box {
		width: 650rpx;
		max-height: 980rpx;
		margin: auto;
		overflow-y: scroll;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.jp_title_1 {
		width: 690rpx;
		max-height: 1020rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pop_jp_title {
		text-align: center;

		image {
			width: 430rpx;
			height: 124rpx;
		}
	}

	.pop_jp {
		width: 750rpx;
		padding-top: 200rpx;
		padding-bottom: 300rpx;
		overflow-y: scroll;
		box-sizing: border-box;
	}

	.tuijian_item>image {
		width: 212rpx;
		height: 297rpx;
	}

	.tuijian_item {
		font-size: 24rpx;
		text-align: center;
		width: 212rpx;
		margin-top: 20rpx;
	}

	.tuijian_list>.tuijian_item:nth-child(3n+2) {
		margin: 20rpx 20rpx 0;
	}

	.tuijian_list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 690rpx;
		margin: auto;
		/* height: 700rpx; */
	}

	.jilv_list>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #F7F7F7;
	}

	.jilv_list image:nth-of-type(2) {
		width: 55rpx;
		height: 55rpx;
		border-radius: 5rpx;
		margin-right: 20rpx;
	}

	.jilv_list image:nth-of-type(1) {
		width: 55rpx;
		height: 55rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.jilv_list {
		width: 657rpx;
		height: 164rpx;
		border: 2rpx solid #F7F7F7;
		margin: 22rpx auto;
		padding: 10rpx 20rpx 16rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}


	.jilv_title>view {
		min-width: 104rpx;
		height: 50rpx;
		line-height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 24rpx;
		flex-shrink: 0;
		color: #F7F7F7;
		padding: 0 10rpx;
	}

	.jilv_title {
		font-size: 30rpx;
		color: #F7F7F7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		margin: 20rpx auto;
		overflow-x: scroll;
	}

	.fangshi text {
		color: #B07CDD;
	}

	.fangshi>view>image {
		margin-right: 20rpx;
	}

	.fangshi image {
		width: 40rpx;
		height: 40rpx;
	}

	.fangshi {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		line-height: 60rpx;
		align-items: center;
	}

	.order_desc {
		width: 690rpx;
		margin: 20rpx auto;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}

	.zhifu {
		width: 240rpx;
		height: 68rpx;
		border-radius: 7rpx;
		font-size: 33rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.zhifu text {
		background: linear-gradient(0deg, #B75AFF 0%, #FFFFFF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.order_bottom {
		height: env(safe-area-inset-bottom);
	}

	.order_title_btn {
		width: 690rpx;
		height: 98rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: center;
		font-size: 24rpx;
		box-sizing: border-box;
	}

	.order_num text {
		font-size: 32rpx;
		color: #B07CDD;
	}

	.order_num>view:nth-of-type(2) {
		font-size: 24rpx;
	}

	.order_num {
		display: flex;
		justify-content: space-between;
		border-top: 1rpx solid #333333;
		margin-top: 20rpx;
		padding: 20rpx 0;
	}

	.order_pic>view>view:nth-of-type(3) {
		display: flex;
		justify-content: space-between;
		width: 610rpx;
	}

	.order_pic>view:nth-of-type(2) {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		padding-top: 14rpx;
		box-sizing: border-box;
	}

	.order_pic_img>image {
		width: 168rpx;
		height: 168rpx;
		border-radius: 10rpx;
	}

	.order_pic_img {
		width: 0;
		height: 188rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order_pic {
		display: flex;
	}

	.order_title_con1 {
		width: 690rpx;
		background: #090909;
		border: 2rpx solid #B07CDD;
		border-radius: 17rpx;
		margin: auto;
		margin-top: 28rpx;
		padding: 20rpx 30rpx 10rpx;
		box-sizing: border-box;

		.order_coupon {
			display: flex;
			align-items: center;

			.coupon_text {
				flex: 1;
			}

			.coupon_money {
				color: #B07CDD;
			}
		}
	}

	.order_title>image {
		width: 275rpx;
		height: 88rpx;
		position: absolute;
		left: 30rpx;
		top: -44rpx;
	}

	.order_title_text {
		flex: 1;
		text-align: center;
		padding-left: 30rpx;
		font-size: 32rpx;
		margin-top: 20rpx;
		font-weight: bold;
		background: linear-gradient(0deg, #B18DD6 0%, #FFFFFF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-family: 'pangmen';
	}

	.order_title {
		height: 89rpx;
		display: flex;
		align-items: center;
		font-size: 50rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		position: relative;
		text-align: right;
	}

	.order {
		width: 750rpx;
		background: rgba(0, 0, 0, 0.9);
		// border-radius: 30rpx 30rpx 0px 0px;
		// border: 5rpx solid #FF7315;
		border-bottom: none;
		position: absolute;
		bottom: 0;
		// padding: 10rpx 0rpx 50rpx;
		box-sizing: border-box;
		color: #FFFFFF;
	}

	.ca {
		margin-right: 20rpx;
	}

	.pop_title {
		// font-family: 'zcq';
		font-size: 32rpx;
		height: 58rpx;
		line-height: 58rpx;
		margin-top: 10rpx;
		text-align: center;
		background: linear-gradient(0deg, #A98FD3 0%, #E7CBFF 50%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: bold;
	}

	.pop_con {
		height: 440rpx;
		margin: auto;
		margin-top: 50rpx;
		padding: 0rpx 36rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		color: #FFFFFF;
		box-sizing: border-box;
		overflow-y: scroll;
	}

	.shuoming_close {
		text-align: center;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.pop {
		width: 543rpx;
		height: 801rpx;
		padding-top: 74rpx;
		box-sizing: border-box;
		/* background: #FFFFFF; */
		/* border-radius: 20rpx; */
	}

	button::after {
		border: none;
	}

	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height: inherit;
		border-radius: 0;
	}

	.xuanfu image {
		width: 77rpx;
		height: 77rpx;
		margin-top: 20rpx;
	}

	.xuanfu {
		position: fixed;
		bottom: 391rpx;
		right: 20rpx;
		width: 77rpx;
		z-index: 21;
	}

	// .footer>view>view {
	// 	width: 145rpx;
	// 	height: 75rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	position: absolute;
	// 	top: -20rpx;
	// 	font-size: 20rpx;
	// 	font-weight: 400;
	// 	padding-bottom: 24rpx;
	// 	box-sizing: border-box;
	// }

	// .footer>view {
	// 	width: 311rpx;
	// 	height: 124rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	position: relative;
	// 	font-weight: bold;
	// }

	// .footer>view:nth-of-type(3) {
	// 	width: 268rpx;
	// 	height: 265rpx;
	// 	position: absolute;
	// 	left: 0;
	// 	right: 0;
	// 	margin: auto;
	// }

	.footer {
		/* margin: 330rpx auto; */
		width: 95%;
		margin: auto;
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		position: relative;
		color: #FFFFFF;

		.footer_left {
			width: 286rpx;
			height: 132rpx;
			position: relative;
			left: 0;

			.footer_right_text {
				width: 150rpx;
				text-align: center;
				line-height: 41rpx;
				font-size: 24rpx;
				position: absolute;
				left: 40rpx;
				bottom: 132rpx;

				text {
					font-weight: bold;
					background: linear-gradient(0deg, #B75AFF 0%, #FFFFFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}

		.footer_center {
			width: 329rpx;
			height: 132rpx;
			position: absolute;
			left: 190rpx;
			top: -50rpx;

			.footer_center_text {
				font-size: 24rpx;
				width: 163rpx;
				text-align: center;
				position: absolute;
				left: 80rpx;
				bottom: 132rpx;
				z-index: 99;
				padding: 10rpx 10rpx 50rpx 10rpx;

				text {
					font-weight: bold;
					background: linear-gradient(0deg, #B75AFF 0%, #FFFFFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}

		.footer_right {
			width: 286rpx;
			height: 132rpx;
			position: absolute;
			right: 0;

			.footer_right_text {
				width: 150rpx;
				text-align: center;
				line-height: 41rpx;
				font-size: 24rpx;
				position: absolute;
				right: 47rpx;
				bottom: 132rpx;

				text {
					font-weight: bold;
					background: linear-gradient(0deg, #B75AFF 0%, #FFFFFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}
	}

	.gonggao {
		width: 652rpx;
		height: 78rpx;
		margin: 20rpx auto;
		/* display: flex; */
		/* align-items: center; */
		font-size: 22rpx;
		color: #CCCCCC;
		padding-top: 6rpx;
		box-sizing: border-box;
		padding: 20rpx;
		position: relative;
		z-index: 9;
	}

	.ka_title_price {
		text {
			font-size: 44rpx;
		}
	}

	.ka_title_text {
		width: 300rpx;
		text-align: center;
		margin-right: 50rpx;
	}

	.ka_title>view {
		width: 100%;
		height: 118rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		padding: 0 80rpx;
		box-sizing: border-box;
	}

	.ka_title {
		width: 750rpx;
		height: 118rpx;
		background: #161616;
		position: relative;
		z-index: 9;
	}

	.header_title>view:nth-of-type(2) {
		width: 520rpx;
		text-align: center;
		/* margin: auto; */
	}

	.header_title>view:nth-of-type(1) {
		display: flex;
		align-items: center;
	}

	.header_title image {
		width: 48rpx;
		height: 48rpx;
	}

	.header_title {
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		box-sizing: border-box;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		box-sizing: border-box;
		color: #FFFFFF;
	}

	.head {
		position: fixed;
		top: 0;
		z-index: 20;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1));
		width: 750rpx;
		box-sizing: border-box;
		height: 150rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.content {
		background: #09081C;
		width: 100vw;
		height: 100vh;
		padding-top: 150rpx;
		box-sizing: border-box;
		background-attachment: fixed;
		position: relative;
	}
</style>